<template>
  <div id="dashboardContainer" class="dashboard-container">
    <div class="iconCon">
      <div class="iconbody">
        <div class="iconlist">
          <div v-for="(item, index) in iconList" :key="index" class="iconBlock" @click="selectedIcon(item)">
            <svg-icon :icon-class="item" style="height: 50px;width: 30px;" :color="color" />
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import icons from '@/utils/requireIcons'
export default {
  name: 'IconHtml',
  data() {
    return {
      value: '',
      name: '',
      iconList: icons,
      color: '#000'
    }
  },
  computed: {

  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    filterIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    selectedIcon(name) {
      this.$emit('selected', name)
      document.body.click()
      console.log(name)
      const inputNode = document.createElement('input') // 创建input
      inputNode.value = name // 赋值给 input 值
      document.body.appendChild(inputNode) // 插入进去
      inputNode.select() // 选择对象
      document.execCommand('Copy') // 原生调用执行浏览器复制命令
      inputNode.className = 'oInput'
      inputNode.style.display = 'none' // 隐藏
      this.$message.success('复制成功')
    },
    reset() {
      this.name = ''
      this.iconList = icons
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.iconCon{
  width: 100%;
  .iconbody {
    width: 100%;
    padding: 10px;
    .iconlist {
      // background-color: red;
      min-height: 300px;
      // overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      .iconBlock{
        height: 50px;
        line-height: 50px;
        margin-bottom: 5px;
        cursor: pointer;
        width: 20%;
        color: black;
        span {
          display: inline-block;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
      }
    }
    }
}
</style>
